<!doctype html>
<html>

<head>
    <#import "spring.ftl" as spring>
        <title>
            <@spring.message code="title" />
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css">
		<link href="/bootstrap-datetimepicker.min.css" rel="stylesheet">
	    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
        <link rel=stylesheet type=text/css href="/style.css" />
        <link rel=stylesheet type=text/css href="/todo.css" />
        <link rel="stylesheet" type="text/css" href="/highlight-theme-github.css" />
        <script src="/highlight.pack.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <#include "/nav.ftl">
        </div>
        <div class="row">
			<div class="col-md-12">
				 <div class="addtask h2Text col-md-offset-10">
                    <a href="#" class="btn btn-default btn-sm" id="addToDo" data-toggle="modal" data-target="#myModal">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>
                </div>
                <div class="itemsbox">
                  <section class="content-header">
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i>待办事务</a></li>
			<li><a href="#">任务详情</a></li>
		</ol>
	</section>
	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-xs-12">
				<div class="box">
					<!-- /.box-header -->
					<div class="box-body table-responsive no-padding">
						<table class="table table-hover">
							<tr>
								<th>ID</th>
								<th>任务内容</th>
								<th>开始日期</th>
								<th>结束日期</th>
								<th>优先级</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
								<#if todos??>
							<#list todos as todo>
							<tr>
								<td>${todo.id}</td>
								<td>${todo.contentStr}</td>
								<td>${todo.timeBegin?string('yyyy/MM/dd HH:mm:ss')}</td>
								<td>${todo.timeEnd?string('yyyy/MM/dd HH:mm:ss')}</td>
								<td>
								<#if todo.level == 2>
								<span class="label label-success">
									中
								</span>
								<#elseif todo.level == 3>
								<span class="label label-danger">
									高
								</span>
								<#else>
								<span class="label label-default">
									低
								</span>
								</#if>
								</td>
								<td>
								<#if todo.status == 1>
								<span class="label label-success">
									完成
								</span>
								<#elseif todo.status == 0>
								<span class="label label-danger">
									未完成
								</span>
								</#if>
								</td>
								<td>
									<button id="deleteBtn" type="button" class="btn btn-xs btn-primary btn-flat" onclick='deleteItem(${todo.id})'>删除</button>
									<button id="updateBtn" type="button" class="btn  btn-xs btn-primary btn-flat"  onclick='updateStatus(${todo.id})'>修改状态</button>
								</td>
							</tr>
							</#list>
							</#if>
						</table>
					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->
			</div>
		</div>
	</section>
	<!-- /.content -->
                </div>
				<hr />
			</div>
		</div>
		</div>
		<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					新增任务
				</h4>
			</div>
			<div class="modal-body">
    <form class="bs-example bs-example-form" role="form" id="addForm">
	<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <label>选择开始时间：</label>
            <!--指定 date标记-->
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' name="timeBegin"  class="form-control datepick" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-sm-6'>
        <div class="form-group">
            <label>选择结束时间：</label>
            <!--指定 date标记-->
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' name="timeEnd" class="form-control datepick" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
        
    <div class="input-group">
        <span class="input-group-addon">任务内容</span>
        <input type="text" name="contentStr" class="form-control" placeholder="任务内容">
    </div>
	<br/>
   	<div class="input-group">
		<label class="input-group-addon">&nbsp;优&nbsp;先&nbsp;级&nbsp;</label>	
		<select class="form-control" name="level">	
  			<option value="3">高</option>
  			<option value="2">中</option>
  			<option value="1">低</option>
    	</select>
	</div>
    </form>
	</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">关闭
			</button>
			<button type="button" class="btn btn-primary" id="addTodo">
					保存
			</button>
		</div>
	</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
		<script src="/jquery-2.2.4.min.js"></script>
  		 <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript"
		src="/bootstrap-datetimepicker.zh-CN.js"></script>
	<script>
	$('.datepick').datetimepicker({
		format: 'yyyy/mm/dd hh:ii:ss',
    	language: 'zh-CN',
    	todayBtn: 1,
    	autoclose: 1,
    	todayHighlight: 1,
    	startView: 2,
    	forceParse: 0
});
    $("#addTodo").click(function(){
     	$.ajax({
			async : false,
			cache : false,
			type : 'POST',
			data :  $("#addForm").serialize(),
			// contentType : 'application/json',    //发送信息至服务器时内容编码类型
			//dataType : "json",
			url : "/todo/add",//请求的action路径  
			error : function() {//请求失败处理函数  
				alert('失败');
			},
			success : function(data) { //请求成功后处理函数。    
				window.location.reload();
			}
			});
		});
	function deleteItem(id){
	$.ajax({
			async : false,
			cache : false,
			type : 'GET',
			// contentType : 'application/json',    //发送信息至服务器时内容编码类型
			//dataType : "json",
			url : "/todo/delete/"+id,//请求的action路径  
			error : function() {//请求失败处理函数  
				alert('失败');
			},
			success : function(data) { //请求成功后处理函数。    
				window.location.reload();
			}
			});
	}
	function updateStatus(id){
		$.ajax({
			async : false,
			cache : false,
			type : 'GET',
			// contentType : 'application/json',    //发送信息至服务器时内容编码类型
			//dataType : "json",
			url : "/todo/update/"+id,//请求的action路径  
			error : function() {//请求失败处理函数  
				alert('失败');
			},
			success : function(data) { //请求成功后处理函数。    
				window.location.reload();
			}
			});
	}
	</script>
</body>
</html>